@use '../core' as *;

.aboutPage {
    margin-top: $spacing-size-12;
    margin-bottom: calc($spacing-size-12 * 4);

    h2 {
        margin-top: $spacing-size-8;
    }
}

.team {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-size-4;
    margin-bottom: calc($spacing-size-12 * 2);
    line-height: var(--text-lh-tight);

    @media screen and (min-width: $breakpoint-about-small) {
        gap: $spacing-size-8;
    }

    > div {
        max-width: calc((100% - $spacing-size-4 * 1) / 2);

        @media screen and (min-width: $breakpoint-about-small) {
            max-width: calc((100% - $spacing-size-8 * 2) / 3);
        }

        @media screen and (min-width: $breakpoint-about-four-column) {
            max-width: calc((100% - $spacing-size-8 * 3) / 4);
        }

        @media screen and (min-width: $breakpoint-about-five-column) {
            max-width: calc((100% - $spacing-size-8 * 4) / 5);
        }

        @media screen and (min-width: $breakpoint-about-six-column) {
            max-width: calc((100% - $spacing-size-8 * 5) / 6);
        }
    }

    img {
        width: 100%;
        border-radius: var(--radius-md);
    }

    h3 {
        margin-top: $spacing-size-2;
        margin-bottom: $spacing-size-1;
        line-height: var(--text-lh-tight);
    }

    p {
        line-height: var(--text-lh-tight);
    }
}

.footer {
    display: flex;
    gap: $spacing-size-8;
    flex-direction: column;

    @media screen and (min-width: $breakpoint-about-small) {
        flex-direction: row;

        > div {
            width: 33.3333%;
        }
    }
}
